<template>
  <div>
    <Father ref="father" />
    <button @click="changeName">改变名称</button>
  </div>
</template>

<script>
import {
  ref
} from 'vue';
import Father from '@/components/Father';

export default {
  name: 'App',
  components: {
    Father
  },
  methods: {
    // changeName() {
      // vue2 获取ref 调用组件实例上的方法
      // 如果ref 放到组件上就是拿到组件实例 如果放到元素上就是拿到元素
      // $refs 只会在组件渲染完成之后生效
      // 避免在template、 computed里使用

    //   console.log(this.$refs.father.changeName);
    //   this.$refs.father.changeName();
    // }
  },
  setup(props) {
    const father = ref(null); // vue3 获取ref 调用组件实例上的方法

    const changeName = () => {
      father.value.changeName();
    }

    return {
      father,
      changeName
    }
  }
}
</script>

<style>

</style>
